<template>
    <div>
        <div id="header">
            <div class="one">
                <p class="fa fa-angle-left" @touchstart="back"></p>
            </div>
            <div id="nav-header">商品详情页</div>

        </div>
        <point></point>

        <div id="goodsitem">
            <swiper :aspect-ratio="300/400" :list="newgoodimg" loop auto></swiper>
        </div>
        <div id="pricebg">
            <div class="pricebox">
                <div class="item">[巨无霸特价] {{s.goodsname}}</div>
                <div class="fl">
                    <div class="bigtext">{{(s.goodsprice*1)|currency("￥",2)}}</div>
                    <div class="vip-price">会员价最低
                        <span>￥{{s.goodsprice-8}}</span>起</div>
                    <div class="fa fa-angle-right icon"></div>
                </div>
                <div class="cuxiao">
                    <div>
                        <span id="cu">促</span>
                    </div>
                    <div class="fa fa-angle-right icon"></div>
                </div>
                <div class="pricebox area">
                    <div class="goods">
                        <span>原产地: {{s.goodsarea}}</span>
                        <span class="fa fa-angle-down"></span>
                    </div>
                    <div class="goods">
                        <span>数量: {{s.goodsnumber}}</span>
                        <span class="fa fa-angle-down"></span>
                    </div>
                </div>
                <div class="flx">
                    <span>数量 ：</span>
                    <div class="number-box">
                        <span class="b" @touchstart="numberDecrease">-</span>
                        <span class="number-box b">{{count}}</span>
                        <span class="b" @touchstart="count++">+</span>
                    </div>
                </div>
            </div>
        </div>
        <div id="foot-bar">
            <div style="background-color:#fff">
                <div id="third-line">
                    <div class="msg" :class="{'line':isshow,'msg':!isshow}" @touchstart="shwo1">商品详情</div>
                    <div class="msg" :class="{'line':!isshow,'msg':isshow}" @touchstart="shwo2">基本信息</div>
                </div>
            </div>
            <div id="pic" v-if="isshow">
                <div class="picbox" v-for="p in pic" :key="p">
                    <img :src="p" alt="">
                </div>
            </div>
            <div v-else id="bottom">
                <div class="sort">所属分类: {{s.smalltype}}</div>
            </div>
        </div>
        <footers></footers>
        <tabbar :a="s" :aa1="count"></tabbar>
    </div>
</template>

<script>
import tabbar from "../components/tabbar"
import footers from "../components/footers"
import point from "../components/point"
import { Swiper, Divider, SwiperItem } from 'vux';
export default {
    data: function() {
        return {
            s: {},
            pic: [],
            count: "1",
            isshow: true
        }
    },
    components: {
        Swiper,
        Divider,
        SwiperItem,
        point,
        footers,
        tabbar
    },
    filters: {
        currency: function(money, prefix = "$", num = 2) {
            var r = money.toFixed(num);
            r = prefix + r;
            return r;
        }
    },
    computed: {
        newgoodimg: function() {
            var str = [];
            for (var i = 0; i < this.pic.length; i++) {
                var obj = {};
                obj.img = this.pic[i];
                str.push(obj);
            }
            return str;
        }
    },
    methods: {
        back: function() {
            history.back();
        },
        numberDecrease: function() {
            if (this.count > 1) {
                this.count--
            }
        },
        shwo1: function() {
            this.isshow = true
        },
        shwo2: function() {
            this.isshow = false
        }
    },
    mounted() {
        // console.log(this.$route.params.msg);
        var params = {
            a: this.$route.params.msg
        }
        this.http.post("/api/goodsdetails", params)
            .then(res => {
                // console.log(res.data.msg);
                this.s = res.data.msg;
                this.pic = res.data.msg.pic;
            })
    }
}
</script>

<style scoped>
.sort {
    width: 90vw;
    height: 30px;
    line-height: 30px;
    margin: 0 auto;
    margin-top: 15px;
    margin-bottom: 15px;
    font-size: 12px;
    color: #666;
    background-color: #fff;
}

.line {
    width: 50vw;
    /*height:2px;*/
    border-bottom: solid 3px orange;
}

.white {
    padding: 2px 2px;
    background-color: #fff;
}

#pic {
    width: 90vw;
    margin: 0 auto;
    margin-top: 10px;
    padding: 2px 2px 2px 2px;
    background-color: #fff;
    /*border: solid 1px black;*/
}

.picbox {
    width: 88vw;
    margin: 0 auto;
    /*padding: 2px 2px 2px 2px;*/
    /*border: solid 1px black;*/
    background-color: #f2f2f2;
}

#header {
    width: 100vw;
    height: 37px;
    background-color: #f2f2f2;
    border-bottom: 1px solid #dcdcdc;
    top: 0;
    display: flex;
}

#nav-header {
    line-height: 37px;
    width: 60vw;
    text-align: center;
    font-size: 14px;
}

p {
    margin: 0;
    padding-left: 15px;
    font-size: 26px;
    line-height: 37px;
    color: #333;
}

.one {
    width: 20vw;
    height: 37px;
    /*border: solid 1px black;*/
}

.two {

    /*margin-right: 9px;*/
    width: 60vw;
    height: 37px;
    /*border: solid 1px black;*/
}

.flx {
    display: flex;
    margin-top: 10px;
    padding-bottom: 20px;
}

.b {
    height: 10px;
    padding: 0 10px;
    text-align: center;
    line-height: 10px;
}

.number-box {
    border: solid 1px #666;
}

#mainbox {
    background-color: #f2f2f2;
}

#goods-details {
    width: 35vw;
    line-height: 37px;
    margin: 0 auto;
}

#goodsitem {
    /*margin-top: 37px;*/
}

.pricebox {
    width: 90vw;
    margin: 0 auto;
}

.item {
    padding-top: 15px;
    font-size: 14px;
    font-family: Arial, Helvetica, STHeiTi, sans-serif;
    font-weight: 700;
}

#pricebg {
    background-color: white;
}

.fl {
    display: flex;
    justify-content: space-between;
    padding-top: 5px;
    padding-bottom: 10px;
    line-height: 8vw;
}

.bigtext {
    color: #28770d;
    font-size: 7vw;
    line-height: 7vw;
    font-weight: 700;
}

.icon {
    line-height: 8vw;
    font-size: 6vw;
}

.vip-price {
    font-size: 12px;
    color: #666;
}

.vip-price span {
    color: #28770d;
    font-weight: 700;
}

.cuxiao {
    display: flex;
    justify-content: space-between;
    border-top: #eaeaea 1px dashed;
    padding: 10px 0;
    border-bottom: #eaeaea 1px dashed;
}

#cu {
    background-color: #fc6b00;
    color: #fff;
    padding: 5px 5px;
    height: 22px;
    line-height: 22px;
    font-size: 12px;
}

.area {
    display: flex;
    font-size: 14px;
    color: #000;
}

.goods {
    margin: 10px 20px 10px 0;
    padding: 5px 10px;
    border: 1px solid #ddd;
}

#foot-bar {
    width: 100vw;
    /*height: 500px;*/
    /*border: solid 1px black;*/
    background-color: #f2f2f2;
    padding-top: 20px;
}

#third-line {
    width: 90vw;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    color: #666;
    margin: 0 auto;
    display: flex;
    text-align: center;
}

.msg {
    width: 45vw;
}
</style>